<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>动态表头测试</title>
    <script th:src="@{/webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
    <style>
        /*<!--表格样式-->*/
        #kpiTable {
            width: 2500px;
        }

        /*单元格样式*/
        #kpiTable td {
            width: 200px;
            height: 30px;
        }

        /*表头样式*/
        #kpiTable th {
            width: 200px;

        }

        /*二级列表头*/
        .rowTh, .lv2ColTh {
            font-family: "楷体", "DejaVu Sans Mono", sans-serif;
            font-size: 20px;
        }

        /*一级列表头*/
        .lv1ColTh {
            font-family: "Adobe 黑体 Std R", "DejaVu Sans Mono", sans-serif;
            font-size: 22px;
        }

        /*表头颜色样式*/
        .header {
            background-color: silver;
        }

        /*可编辑单元格文本框*/
        input.cell {
            width: 100%;
            height: 100%;
            font-size: 100%;
        }

    </style>
    <script>
        $(function () {
            console.log("Hello Jquery");
            var tdArr = $("td.editableTd");

            // var inputObj = $('<input type="text" class="cell"/>');

            $.each(tdArr, function (index, item) {
                $(item).html('<input type="text" class="cell"/>');
            });

            // console.log(tdArr.length);
            // tdArr.forEach(function (val, index) {
            //     console.log(index)
            // });

            // tdArr.click(function(){
            //
            //     //找到当前鼠标点击的td
            //     var tdObj=$(this);
            //     //
            //     if(tdObj.children("input").length>0){
            //         //当前td中的input，不执行click处理
            //         return false;
            //     }
            //     var text=tdObj.html();
            //     //清空td的内容
            //     tdObj.html("");
            //
            //     //创建一个文本框
            //     //去掉文本框的边框
            //     //文本框的文字大小16px
            //     //文本框的宽度与td相同
            //     //设置文本框的背景色
            //     //将td中的内容放到文本框中
            //     //将文本框插入到td中
            //     var inputObj=$("<input type='text' />").css("border-width","0")
            //         .css("font-size","16px")
            //         .width(tdObj.width())
            //         .css("background-color",tdObj.css("background-color"))
            //         .css("font",tdObj.css("font"))
            //         .val(text)
            //         .appendTo(tdObj);
            //     //文本框插入后被选中
            //     //inputObj.get(0).select();
            //     inputObj.trigger("focus").trigger("select");
            //     inputObj.click(function(){
            //         return false;
            //     });
            //     //处理文本框的回车和Esc操作
            //     inputObj.keyup(function(event){
            //         //获取键值
            //         var keycode=event.which;
            //         //回车
            //         if(keycode==13){
            //             //获取当前文本框的内容
            //             var inputText=$(this).val();
            //             //将td的内容修改为文本框的内容
            //             tdObj.html(inputText);
            //         }
            //
            //         //esc情况,
            //         //将td的内容还原成text
            //         if(keycode==27){
            //             tdObj.html(text);
            //         }
            //
            //     });
            //
            // });

            // for (var i = 0; i < tdArr.length; i ++){
            //     inputObj.appendTo(tdArr[i]);
            // }
            //     .forEach(function(index, item){
            //     console.log(index);
            // });
        });
    </script>
</head>
<body>
<form>
    <table id="kpiTable" cellspacing="0" border="1">
        <tr>
            <th colspan="14" class="header">KPI完成情况</th>
        </tr>
        <tr>
            <th class="rowTh header" rowspan="2">项目</th>
            <th class="lv1ColTh header" colspan="3">客户数</th>
            <th class="lv1ColTh header" colspan="4">规模类</th>
            <th class="lv1ColTh header" colspan="6">中收类</th>
        </tr>
        <tr>
            <th class="lv2ColTh">私行</th>
            <th class="lv2ColTh">贵宾</th>
            <th class="lv2ColTh">有效客户</th>
            <th class="lv2ColTh">AUM</th>
            <th class="lv2ColTh">一般个人存款</th>
            <th class="lv2ColTh">结构性存款净增量</th>
            <th class="lv2ColTh">固定期限理财净增量</th>
            <th class="lv2ColTh">非货基销量</th>
            <th class="lv2ColTh">趸缴销量</th>
            <th class="lv2ColTh">期缴销量</th>
            <th class="lv2ColTh">私行复杂产品(净值型产品代销信托/资管计划)</th>
            <th class="lv2ColTh">两大单品</th>
            <th class="lv2ColTh">其他销量</th>
        </tr>

        <tr>
            <th class="rowTh header">目标数</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th class="rowTh header">第一周实际达成</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th class="rowTh header">第二周实际达成</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th class="rowTh header">第三周实际达成</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th class="rowTh header">第四周实际达成</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th class="rowTh header">本月实际达成</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td colspan="14"></td>
        </tr>
    </table>
</form>


</body>
</html>